<!--
 * @Author: 标签及其属性的应用
 * @Date: 2021-08-02 19:35:12
 * @LastEditTime: 2021-08-02 20:17:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\2-HTML&CSS\day01\day01中标签及其属性的应用.html
-->
<!DOCTYPE html>
<!-- HTML5的文档类型 -->
<html lang="en">
<head>
    <!-- 头部标签head -->
    <meta charset="UTF-8">
    <!-- 设置解析的字符集是使用UTF-8来实现的 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 这里是一些信息的设置 -->
    <title>HTML中标签和属性的应用</title>
    <!-- 网页的标题在这里可以设置 -->
</head>
<!-- 头部标签结束 -->

<body id="header">
<!-- 内容标签body -->
    <h2>目录</h2>
    <a href="#myDiv"><h4>块级元素的使用</h4></a>
    <a href="#myOl"><h4>有序列表</h4></a>
    <a href="#myUl"><h4>无序列表</h4></a>
    <a href="#myDl"><h4>自定义列表</h4></a>
    <a href="#myA"><h4>超链接</h4></a>
    <a href="#myImg"><h4>图片标签</h4></a>

    <!-- 块级元素和行内元素演示 -->
    <!-- div盒子 -->
    <div id="myDiv">我是一个盒子，这里是块级元素</div>
    <div>我可以独占一行，不管我多长</div>
    <!-- p段落标签 -->
    <p>我是也是一个块级元素，我也可以独占一行</p>
    <p>我表示的是一个段落，但是我有空行，和div不一样</p>
    <p>我是一个很长的段落。我是一个很长的段落。<br />这是第二段，我是一个很长的段落。我是一个很长的段落。我是一个很长的段落。<br />这是第三段，我是一个很长的段落。我是一个很长的段落。我是一个很长的段落。我是一个很长的段落。</p>
    <!-- span行内元素 -->
    <span>我是一个行内元素，</span>
    <span>我只能占据我内容的长度</span>

    <!-- 列表演示 -->
    <!-- 有序列表演ul -->
    <ol id="myOl">
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ol>
    <!-- 更改有序列表的起始值 -->
    <ol start="5">
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ol>
    <!-- 规定有序列表的顺序为降序 -->
    <ol reversed>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ol>
    <!-- 有序列表的type值 -->
    <ol type="A">
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ol>

    <!-- 无序列表 -->
    <ul id="myUl">
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ul>

    <!-- 自定义列表 -->
    <dl id="myDl">
        <dt>自定义列表的标题</dt>
        <dd>第一</dd>
        <dd>第二</dd>
        <dd>第三</dd>
        <dd>第四</dd>
    </dl>

    <!-- 超链接的应用 -->
    <!-- 百度链接的跳转 设置新窗口打开-->
    <a id="myA" href="https://baidu.com" target="_blank">百度一下</a>
    <!-- 邮箱地址跳转 -->
    <a href="mailto:" target="_blank">联系我</a>
    <!-- 锚点的设置 -->
    <a href="#header">返回顶部</a> 

    <!-- 图片标签 -->
    <img id="myImg" src="D:\壁纸\2.JPG" alt="陷落美好">
    <!-- alt的应用 -->
    <img src="D:\壁纸\22.JPG" alt="陷落美好">
    <!-- title的应用 -->
    <img src="D:\壁纸\2.JPG" alt="陷落美好" title="陷落美好">
    <!-- width的应用 -->
    <img src="D:\壁纸\2.JPG" alt="陷落美好" width="300px">
    <!-- height的应用 -->
    <img src="D:\壁纸\2.JPG" alt="陷落美好" height="300px">
    <!-- width和height的应用 -->
    <img src="D:\壁纸\2.JPG" alt="陷落美好" width="300px" height="300px">
    
    
</body>
<!-- 内容标签结束 -->
</html>